<template>
  <div class="file-preview-overlay" v-if="visible">
    <div class="file-preview-container">
      <!-- 关闭按钮 -->
      <button class="close-button" @click="closePreview">×</button>

      <!-- 文件预览内容 -->
      <div class="file-preview-content">
        <!-- 图片预览 -->
        <img
          v-if="fileType === 'image'"
          :src="fileUrl"
          alt="Preview"
          class="preview-image"
        />

        <!-- 视频预览 -->
        <video
          v-else-if="fileType === 'video'"
          :src="fileUrl"
          controls
          class="preview-video"
        ></video>

        <!-- PDF 预览 -->
        <iframe
          v-else-if="fileType === 'pdf'"
          :src="fileUrl"
          width="100%"
          height="100%"
        ></iframe>

        <!-- Word 文档预览 -->
        <vue-office-docx
          v-else-if="fileType === 'docx'"
          :src="fileUrl"
          style="height: 100%"
        />

        <!-- Excel 文档预览 -->
        <vue-office-excel
          v-else-if="fileType === 'xlsx'"
          :src="fileUrl"
          style="height: 100%"
        />

        <!-- PPT 文档预览 -->
        <vue-office-ppt
          v-else-if="fileType === 'ppt'"
          :src="fileUrl"
          style="height: 100%"
        />

        <!-- 文本文件预览 -->
        <textarea
          v-else-if="fileType === 'text'"
          v-model="fileContent"
          rows="20"
          cols="80"
        ></textarea>

        <!-- 不支持的文件类型 -->
        <div v-else>
          <p>不支持预览的文件类型</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import VueOfficePpt from '@vue-office/pptx';

export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePpt,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    fileUrl: {
      type: String,
      required: true,
    },
    fileType: {
      type: String,
      required: true,
    },
    fileContent: {
      type: String,
      default: '',
    },
  },
  methods: {
    closePreview() {
      this.$emit('close');
    },
  },
};
</script>

<style scoped>
/* 遮罩层 */
.file-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保在最上层 */
}

/* 预览容器 */
.file-preview-container {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  height: 90%;
  max-width: 1200px;
  max-height: 800px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 关闭按钮 */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

.close-button:hover {
  color: #f00;
}

/* 预览内容 */
.file-preview-content {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
}

/* 图片预览 */
.preview-image {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

/* 视频预览 */
.preview-video {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

/* iframe 预览 */
iframe {
  border: none;
}

/* 文本预览 */
textarea {
  width: 100%;
  height: 100%;
  resize: none;
}
</style>